<style lang="less" scoped>
  .d2b2{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="d2b2">
    <div class="d2b2_title">
      <span>6B、D2W达标率</span>
    </div>
    <medical-charts v-if="timeLine.length > 0" :chart-id="chartId" :legend-title="legendTitle" :time-line="timeLine" :chart-data="chartData" :left-y="leftY" :right-y="rightY" class="d2b2_content" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import medicalCharts from './medicalCharts'
import { getD2BNumRatio } from '@/api/comprehensive/D2B'
export default {
  components: {
    medicalCharts
  },
  data() {
    return {
      setInter: null,
      chartId: 'd2b2',
      legendTitle: [],
      leftY: '',
      rightY: '',
      timeLine: [],
      chartData: []
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.timeLine = []
      // this.chartData = []
      this.legendTitle = ['比例', '达标数量']
      this.leftY = '%'
      this.rightY = '例'
      getD2BNumRatio({ hospitalId: this.$store.getters.hospitalId }).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            let averageData = []
            let rateData = []
            let timeLine = []
            res.data.forEach(el => {
              timeLine.push(el.timeName)
              averageData.push(el.reachRatio)
              rateData.push(el.quotaNum)
            })
            this.timeLine = timeLine
            this.chartData = [
              {
                name: '比例',
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true,
                  position: 'top'
                },
                data: averageData
              },
              {
                name: '达标数量',
                type: 'line',
                yAxisIndex: 1,
                label: {
                  show: true,
                  position: 'top'
                },
                data: rateData
              }
            ]
          }
        }
      })
    }
  }
}
</script>
